<template>
  <div>
    <!-- $router.back()返回上一页 -->
    <van-nav-bar title="个人信息编辑" left-arrow @click-left="$router.back()">
      <template #right>
        <van-icon
          name="wap-home-o"
          size="30"
          color="#000"
          @click="$router.push('/')"
        />
      </template>
    </van-nav-bar>

    <!-- 放置个人头像 -->
    <div class="text-center">
      <van-uploader :after-read="afterRead">
        <img class="avatar" :src="userInfo.head_img | avatarFilter" alt="" />
      </van-uploader>
    </div>

    <!-- 修改昵称，点击事件displayNicknameDialog，-->
    <van-cell
      title="昵称"
      is-link
      :value="userInfo.nickname"
      @click="displayNicknameDialog"
    />
    <!-- 给修改密码添加点击事件，点开时弹窗修改 -->
    <van-cell title="密码" is-link value="*****" @click="changePassword" />

    <!-- 修改性别 -->
    <van-cell
      title="性别"
      is-link
      :value="userInfo.gender === 1 ? '男' : '女'"
      @click="changeGender"
    />

    <!-- 弹出框 -->
    <!-- confirm由Dialog文档提供 ，增加弹窗关闭前的检查:before-close-->
    <van-dialog
      v-model="showNicknameDialog"
      title="编辑昵称"
      show-cancel-button
      @confirm="doUpdateNickname"
      :before-close="checkNickname"
    >
      <van-cell-group>
        <van-field v-model="nickname" label="昵称" placeholder="请输入昵称" />
      </van-cell-group>
    </van-dialog>

    <!-- 修改密码 -->
    <van-dialog
      v-model="showPassword"
      title="修改密码"
      show-cancel-button
      :before-close="checkPassword"
    >
      <!-- 重置密码 -->
      <van-field
        v-model.trim.number="password1"
        type="password"
        label="请输入密码"
        :error-message="password1 === password2 ? '' : '密码不一致'"
        required
      />
      <!-- 确认重置密码 -->
      <van-field
        v-model.trim.number="password2"
        type="password"
        label="请确认密码"
        :error-message="password1 === password2 ? '' : '密码不一致'"
        required
      />
    </van-dialog>

    <!-- 修改性别 -->
    <van-dialog
      v-model="showGender"
      title="修改性别"
      show-cancel-button
      :before-close="checkGender"
    >
      <van-radio-group v-model="radio">
        <van-radio name="1">男</van-radio>
        <van-radio name="2">女</van-radio>
      </van-radio-group>
    </van-dialog>
  </div>
</template>


<script>
import { getUser, uploadFile, updataUser } from "@/api/user";
export default {
  created() {
    // 页面初始化完成，调用获取到用户信息的函数
    this.loadUserInfo();
  },
  data() {
    return {
      // data里面需要定义，相当于初始值
      userInfo: {},
      showNicknameDialog: false,
      nickname: "",
      // 不显示密码
      showPassword: false,
      password1: "",
      password2: "",
      // 修改性别
      radio: "",
      showGender: false,
    };
  },
  // 封装函数
  methods: {
    loadUserInfo() {
      getUser().then((res) => {
        this.userInfo = res.data.data;
      });
    },
    afterRead(param) {
      // 此时可以自行将文件上传至服务器
      const data = new FormData();
      // 文件上传是要通过FormData的方式，我们先创建一个空的FormData
      data.append("file", param.file);
      // 把文件放进去FormData
      uploadFile(data).then((res) => {
        // 拿着服务器返回的地址更新用户头像
        updataUser({
          head_img: res.data.data.url,
        }).then((res) => {
          // 更新完用户头像之后，刷新用户信息
          this.loadUserInfo();
        });
      });
    },
    displayNicknameDialog() {
      // 显示昵称编辑弹窗
      this.showNicknameDialog = true;
      // 设置昵称初始值
      this.nickname = this.userInfo.nickname;
    },
    // 点击编辑昵称弹窗确认时触发的函数
    doUpdateNickname() {
      if (!this.nickname) {
        //如果名称为空的话，后面的代码直接不执行
        return;
      }
      updataUser({
        nickname: this.nickname,
      }).then(() => {
        // 刷新用户信息
        this.loadUserInfo();
      });
    },
    // 判断用户名称是否为空
    checkNickname(action, done) {
      // 如果不是点击确认按钮，直接关闭弹窗
      if (action !== "confirm") {
        done();
        return;
      }

      // !取反表示没有名称的时候，done为false
      if (!this.nickname) {
        done(false);
      } else {
        done();
      }
    },
    // 点击密码弹出修改框
    changePassword() {
      this.showPassword = true;
    },
    // 密码框关闭时逻辑，确认还是取消
    checkPassword(action, done) {
      if (action === "confirm") {
        if (this.password1 !== this.password2) {
          this.$toast.fail("两次密码不一致");
          done(false);
        } else if (this.password1 === "") {
          this.$toast.fail("密码不能为空");
          done(false);
        } else {
          updataUser({ password: this.password1 }).then((res) => {
            this.$toast.success(`${res.data.message},两秒后跳转`);
            // 修改成功后，密码框重置为空
            this.password1 = this.password2 = "";
            // 定时器，修改后两秒跳转
            setTimeout(() => {
              this.$router.push("/personalCenter");
            }, 2000);
            done(false);
          });
        }
        // 点取消直接关闭弹窗
      } else if (action === "cancel") {
        done();
      }
    },
    changeGender() {
      this.showGender = true;
      this.radio = JSON.stringify(this.userInfo.gender);
    },
    checkGender(action, done) {
      if (action == "confirm") {
        if (this.radio === "") {
          done(false);
          this.$toast.fail("请选择性别");
        } else {
          updataUser({ gender: this.radio }).then((res) => {
            this.$toast.success(res.data.message);
            this.loadUserInfo();
          });
          done();
        }
      } else if (action === "cancel") {
        done();
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar .van-icon {
  color: #000;
}

.avatar {
  display: block;
  width: 120px;
  height: 120px;
  margin-top: 16px;
  margin-left: auto;
  margin-right: auto;
}

.van-cell::after {
  display: block;
  border-color: #666;
}
.text-center {
  text-align: center;
}
</style>